<template>
  <div class="page">
    <div class="container">
      <div class="action-panel"></div>
      <ddb-table-header 
        v-if="canRenderHeader"
        :store="store"
        :layout="layout"
        :bodyWidth="tableBodyWidth">
      </ddb-table-header>

      <el-table
        ref="ddbTable"
        :showHeader="false"
        height="200"
        v-el-table-infinite-scroll="load"
        :data="list">
        <el-table-column
          fixed
          label="商品ID"
          width="200"
          prop="id">
        </el-table-column>
        <el-table-column
          label="商品名称"
          width="500"
          prop="name">
        </el-table-column>
        <el-table-column
          label="商品描述"
          width="500"
          prop="desc">
        </el-table-column>
        <el-table-column  className="ddb-table-cell-action"
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <ddb-dropdown :data-scope="scope" :actions="actions"></ddb-dropdown>
          </template>
        </el-table-column>       
      </el-table>
      <!-- <ddb-table-header 
        v-if="canRenderHeader"
        :store="store"
        :layout="layout"
        :bodyWidth="tableBodyWidth">
      </ddb-table-header> -->
    </div>
  </div>
</template>

<script>
  import {default as data} from './list'
  import Mousewheel from 'element-ui/src/directives/mousewheel';
  import ddbTableHeader from './ddb-table-header'
  import ddbDropDown from './ddb-dropdown'
  export default {
    // directives: {
    //   Mousewheel
    // },
    data() {
      return {
        list :data.list,
        layout:null,
        store:null,
        actions: [
          { command: '编辑', method: (payload) => { console.log('编辑') } },
          { command: '删除', method: (payload) => { console.log('删除') } }
        ],
      };
    },
    computed: {
      canRenderHeader() {
        return this.store ? true : false
      },
      tableBodyWidth() {
        const { bodyWidth, scrollY, gutterWidth } = this.layout;
        return bodyWidth ? bodyWidth - (scrollY ? gutterWidth : 0) + 'px' : '';
      },
    },
    components:{
      'ddb-table-header': ddbTableHeader,
      'ddb-dropdown':ddbDropDown
    },
    methods:{
      // handleHeaderFooterMousewheel(event, data) {
      //   const { pixelX, pixelY } = data;
      //   if (Math.abs(pixelX) >= Math.abs(pixelY)) {
      //     this.bodyWrapper.scrollLeft += data.pixelX / 5;
      //   }
      // },
      load(){
        console.log('call load')
      }
    },
    mounted() {
      this.layout = this.$refs.ddbTable.layout
      this.store = this.$refs.ddbTable.store
      // debugger
    }
  };
</script>
<style lang="scss">
.page{
  border:2px solid red;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  .action-panel{
    height:200px;
    background-color:darkolivegreen;
  }
  .container{
    border:2px solid darkcyan;
    position:absolute;
    left:150px;
    top:80px;
    right:0;
    bottom:0;
    overflow: auto;
  }
  .ddb-table-header{
    z-index:11;
    position:sticky;
    top:0px;
    bottom:0px;
    overflow:hidden;
    text-align:left;
    .cell {
      padding:6px 10px;
    }
    .el-table__fixed,.el-table__fixed-right{
      position:absolute;
      top:0;
      bottom:0;
      overflow-x:hidden;
      overflow-y:hidden;
      -webkit-box-shadow:0 0 10px rgba(0,0,0,.12);
      box-shadow:0 0 10px rgba(0,0,0,.12)
    }
    .el-table__header-wrapper {
      background-color:#fff;
      &.is-scrolling-left{
        background:#fff;
        &~.ddb-table-fixed-header-wrapper{
          background:red!important;
          .el-table__fixed {
            -webkit-box-shadow:none;
            box-shadow:none;
          }        
        }
      }
      &.is-scrolling-right{
        background:#fff;
        -webkit-box-shadow:none;
        box-shadow:none;
        &~.ddb-table-fixed-header-wrapper{
          background:red!important;
          .el-table__fixed-right {
            -webkit-box-shadow:none;
            box-shadow:none;
          }
        }
      }
    }
    .ddb-table-fixed-header-wrapper{
      // z-index:10;
      & th {
        background-color:#fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
        &.is-hidden {
          background-color:transparent;
          box-shadow:none;
        }
      }
      .el-table__fixed-header-wrapper{
        &.fix-right{
          left:auto;
          right:0;
        }
      }
    }
  }
  th, td {
    &.is-hidden {
      > * {
        visibility: hidden;
      }
    }
  }
  .ddb-table-cell-action{
    .cell {
      overflow:visible
    }
  }
  .el-dropdown {
    .ddb-dropdown-title {
      padding-right:14px;
    }
    .dropDownIcon {
      position:relative;
      margin-left:6px;
      &::after {
        content:'\e790'; // el-icon-caret-bottom
        font-family:element-icons;
        display:'block';
        font-style:normal;
        position:absolute;
        transition:transform 0.2s linear;
      }
      &.hover::after {
        transform:rotate(-180deg)
        // content:'\e78f'// el-icon-caret-top
      }
    }
    .el-dropdown-menu{
      position:fixed!important;
      margin:0!important;
      .el-dropdown-menu__item{
        min-width:50px;
        text-align:left;
      }
    }
  }
}
</style>